<template>
  <div class="search">
    <div id="container" class="map" tabindex="0"></div>
  </div>
</template>
<script>
import AMap from 'AMap'
import Vue from 'vue'
import PictureViewer from '@/components/picture-viewer'
import {mapList} from '@/services/model/project-info'
import constUrl from '@/services/env'

export default {
  data() {
    return {
      map: null, // 地图实例model
      cluster: null, // 点聚合实例model
      points: [],
      infoWindow: null,
      constUrls: '',
      zooms: 8,
    }
  },
  methods: {
    // 初始化地图
    initMap() {
      this.map = new AMap.Map('container', {
        resizeEnable: true,
        center: [107, 26],
        zoom: this.zooms,
        mapStyle: 'amap://styles/dark'
      })
      this.getMarks()
    },
    // markers与窗体信息
    getMarks() {
      // 信息窗口
      this.constUrls = constUrl
      let _this = this
      let content =
        `<el-card class="box-card">
          <div>
           <a @click="btnClose" class="btn-close amap-ui-infowindow-close amap-ui-smp-ifwn-def-tr-close">&#10006;</a>
           <div class="title">{{msg}}</div>
                <ul>
                <li><span class="label_view" style="margin-left: 10px">名称：</span><span>{{windowInfoData.name}}</span></li>
                </ul>
          <el-row :gutter="10">
            <el-col :span="14">
             <el-card shadow="hover">
              <ul>
                <li><span class="label_view">经度：</span><span>{{windowInfoData.longitude}}</span></li>
                <li v-if="windowInfoData.slopeInfo"><span class="label_view">边坡编号：</span><span>{{windowInfoData.slopeInfo.slopeNo}}</span></li>
                <li v-if="windowInfoData.slopeInfo"><span class="label_view">边坡高度：</span><span>{{windowInfoData.slopeInfo.height}}m</span></li>
                <li v-if="windowInfoData.slopeInfo"><span class="label_view">起点桩号：</span><span>{{windowInfoData.slopeInfo.startStoke}}</span></li>
              </ul>
                </el-card>
            </el-col>
            <el-col :span="10">
             <el-card shadow="hover">
                <ul>
                  <li><span class="label_view">纬度：</span><span>{{windowInfoData.latitude}}</span></li>
                  <li v-if="windowInfoData.slopeInfo"><span class="label_view">边坡位置：</span><span>{{windowInfoData.slopeInfo.positionName}}</span></li>
                  <li v-if="windowInfoData.slopeInfo"><span class="label_view">边坡长度：</span><span>{{windowInfoData.slopeInfo.slopeLength}}m</span></li>
                  <li v-if="windowInfoData.slopeInfo"><span class="label_view">终点桩号：</span><span>{{windowInfoData.slopeInfo.endStoke}}</span></li>
                </ul>
                </el-card>
            </el-col>
          </el-row>
          <div class="info-btn">
          <el-button type="success" class="btn-item" @click="toControl(item,windowInfoData.projectId)" v-for="item in windowInfoData.monitorPointList" size="small">{{item.monitorTypeName}}</el-button>
          </div>
        <div class="demo-image__lazy" style="height:150px">
         <el-carousel trigger="click" type="card" height="150px">
          <el-carousel-item v-for="(item,index) in windowInfoData.picList" :key="index">
           <el-image style="height:150px;width:100%"  @click="previewImg(index,windowInfoData.picList)" :src="constUrl+item.url" fit="cover"></el-image>
          </el-carousel-item>
        </el-carousel>
        </div>
        <!-- 查看大图 -->
        <picture-viewer ref="imageViewer"></picture-viewer>
        </div>
        </el-card>`
      let MyComponent = Vue.extend({
        template: content,
        components: {PictureViewer},
        data() {
          return {
            constUrl: '',
            msg: '边坡详情',
          }
        },
        props: {
          windowInfoData: {
            type: Object
          }
        },
        methods: {
          // 查看大图
          previewImg(index, urls) {
            this.$refs.imageViewer.showViewer(urls.map(x => _this.constUrls + x.url), index)
          },
          toControl(val, projectId) {
            _this.$router.push({
              path: `/project/${projectId}/work-point/${val.workPointId}/monitor/${val.monitorType}?activeId=${val.id}`
            })
          },
          btnClose() {
            _this.infoWindow.close(_this.map)
          },
        },
        created() {
          this.constUrl = _this.constUrls
        },
        mounted() {
        }
      })
      // markers与信息窗体
      var cluster
      var markers = []
      markers = this.points.map(x => {
        let bgColor = 'hsla(180, 100%, 50%, 1)'
        if (x.warningLevel === 1) { // marker背景色
          bgColor = 'rgba(13,194,107,1)'
        } else if (x.warningLevel === 2) {
          bgColor = 'rgba(0,115,183,1)'
        } else if (x.warningLevel === 3) {
          bgColor = 'rgba(243,156,18,1)'
        } else if (x.warningLevel === 4) {
          bgColor = 'rgba(255,133,27,1)'
        } else if (x.warningLevel === 5) {
          bgColor = 'rgba(228,51,33,1)'
        }
        const marker = new AMap.Marker({
          position: [x.longitude, x.latitude],
          content: `<div style="background-color:${bgColor};font-size:12px;color:#ffffff;text-align:center;line-height:24px; height: 24px; width: 100px; border: 1px solid hsl(180, 100%, 40%); border-radius: 12px; box-shadow: hsl(180, 100%, 50%) 0px 0px 1px;">${x.warningLevelName}</div>`,
          imageOffset: new AMap.Pixel(-15, -15),
          extData: x,
          iconLabel: 'test'
        })
        // 监听单个点点击事件
        AMap.event.addListener(marker, 'click', e => {
          // 窗体信息
          let component = new MyComponent({ // 传参
            propsData: {
              windowInfoData: e.target.getExtData()
            }
          }).$mount()
          this.infoWindow = new AMap.InfoWindow({
            content: component.$el, // 使用默认信息窗体框样式，显示信息内容
            isCustom: true,
            autoMove: true,
            closeWhenClickMap: true,
            retainWhenClose: true,
            offset: new AMap.Pixel(0, -15),
          })
          this.infoWindow.open(
            this.map,
            marker.getPosition(e.lnt, e.lat)// 窗口信息的位置
          )
        })
        return marker
      })
      if (this.$route.params.projectId) {
        this.map.setFitView(markers)// 自适应显示点标记
        this.map.setZoom(12) // 设置地图层级
      }
      this.addCluster(markers, cluster)
    },
    // marks样式
    addCluster(markers, cluster) {
      if (cluster) {
        cluster.setMap(null)
      }
      // 自定义图标
      var sts = [{
        url: 'https://a.amap.com/jsapi_demos/static/images/blue.png',
        size: new AMap.Size(32, 32),
        offset: new AMap.Pixel(-16, -16)
      }, {
        url: 'https://a.amap.com/jsapi_demos/static/images/green.png',
        size: new AMap.Size(32, 32),
        offset: new AMap.Pixel(-16, -16)
      }, {
        url: 'https://a.amap.com/jsapi_demos/static/images/orange.png',
        size: new AMap.Size(36, 36),
        offset: new AMap.Pixel(-18, -18)
      }, {
        url: 'https://a.amap.com/jsapi_demos/static/images/red.png',
        size: new AMap.Size(48, 48),
        offset: new AMap.Pixel(-24, -24)
      }, {
        url: 'https://a.amap.com/jsapi_demos/static/images/darkRed.png',
        size: new AMap.Size(48, 48),
        offset: new AMap.Pixel(-24, -24)
      }]
      AMap.plugin(['AMap.MarkerClusterer'], () => {
        cluster = new AMap.MarkerClusterer(this.map, markers, {
          styles: sts,
          gridSize: 80,
        })
      })
    },
    // 获取数据
    async getWorkPointList() {
      let proId = {projectId: ''}
      if (this.$route.params.projectId) {
        proId = {projectId: this.$route.params.projectId}
      }
      const {data} = await mapList(proId)
      this.points = data || []
      this.initMap()
    },
  },
  created() {

  },
  mounted() {
    this.getWorkPointList()
  },
}
</script>

<style lang="less" scoped>
  .search {
    height: 100%
  }


  .map {
    width: 100%;
    height: 100%;
  }

  /deep/ .box-card {
    width: 400px;

    .btn-close {
      float: right;
      cursor: pointer;
    }

    .label_view{
      color:#1990FE;
    }
    .title {
      font-size: 16px;
      clear: both;
      background-color: #1990FE;
      margin-bottom: 15px;
      padding: 9px;
      color: white;
      border-radius: 5px;
    }

    .el-card__body {
      background-color: white;
      color: black;
    }

    .el-button--success {
      color: #FFF;
      background-color: #1990FE;
      border-color: #1990FE;
    }

    .info-btn {
      margin-top: 5px;
      margin-bottom: 5px;

      .btn-item {
        margin-bottom: 7px;
        margin-right: 7px;
        background-color: #1990FE;
      }

      /deep/ .el-button + .el-button {
        margin-left: 0px;
      }
    }

    ul li {
      font-size: 13px;
      line-height: 20px;

      span:first-child {
        font-weight: bold;
      }
    }
  }
</style>
